<template>
  <view>
    <view class="toptab zl-flex zl-row-around">
      <view :class="current === 0 ? 'tab_item' : 'tab_item opc'" @click="changetab(0)">
        <view class=""> 数字人视频 </view>
        <view :class="current === 0 ? 'line' : 'line_fff'"> </view>
      </view>
      <view :class="current === 1 ? 'tab_item' : 'tab_item opc'" @click="changetab(1)">
        <view class=""> 数字分身 </view>
        <view :class="current === 1 ? 'line' : 'line_fff'"> </view>
      </view>
      <view :class="current === 2 ? 'tab_item' : 'tab_item opc'" @click="changetab(2)">
        <view class=""> 数字声音 </view>
        <view :class="current === 2 ? 'line' : 'line_fff'"> </view>
      </view>
    </view>
    <view class="list">
      <z-paging ref="paging" v-model="list" @query="queryList" :fixed="false" :auto-clean-list-when-reload="false" :auto="true" :paging-style="{ height: '100%' }" :show-refresher-when-reload="true" :default-page-size="10" :hide-empty-view="true">
        <view class="box" v-if="current === 0">
          <view class="box_item" v-for="(item, index) in list" :key="index">
            <view class="video">
              <!-- 生成中 -->
              <image src="../../static/work/clone.png" v-if="item.status === 1 || item.status === 2" mode="" style="width: 100%; height: 486rpx" class="video"> </image>
              <!-- 成功 -->
              <image :src="item.coverUrl + OssVideoShrink" v-if="item.status === 3" mode="aspectFill" @click="previewVideo(item, index)" style="width: 330rpx; border-top-right-radius: 10rpx; border-top-left-radius: 10rpx" class="video"> </image>
              <!-- 失败 -->
              <view @click="del(item.clipTaskId, index)" class="" v-if="item.status === 4" style="width: 100%; height: 486rpx; background-color: #202020; padding: 140rpx 40rpx 0; border-top-right-radius: 10rpx; border-top-left-radius: 10rpx" class="zl-flex-col zl-col-center">
                <image src="../../static/clone/error.png" mode="" style="width: 62rpx; height: 62rpx" class="video"> </image>
                <view class="zl-color-white zl-font-24 zl-m-t-20" style="opacity: 0.8"> 克隆失败 </view>
                <view class="zl-color-999 zl-font-22 zl-m-t-50" style="opacity: 0.6"> 原因：{{ item.reason }} </view>
              </view>
              <image src="../../static/work/play.png" v-if="item.status === 3" mode="" class="play" @click="previewVideo(item, index)" style="width: 70rpx; height: 70rpx"> </image>
              <!-- <view class="time">
											时长：{{item.step}}{{'/'+item.maxStep}}
										</view> -->
            </view>
            <view class="content">
              <view class="zl-color-000 zl-font-26">
                {{ item.name }}
              </view>
              <view class="zl-color-999 zl-font-20 zl-m-t-4">
                {{ $util.fomateDate(item.createTime / 1000) }}
              </view>
              <!-- <view v-if="item.status===3||item.status===4" class="zl-flex zl-m-t-18 zl-row-right">
							
								<view class="edit" @click="del(item,index)">
									<uni-icons type="trash" size="18" color="red"></uni-icons>删除
								</view>
							</view> -->
            </view>
          </view>
          <view v-if="list.length <= 0" class="zl-flex-col zl-col-center" style="width: 690rpx; margin-top: 50%">
            <image src="../../static/work/empty.png" mode="" style="width: 230rpx; height: 250rpx; margin-bottom: 48rpx"> </image>
            <text class="zl-font-30 zl-color-666">空空如也，您还没有创建哦~</text>
          </view>
        </view>
        <view class="box" v-else-if="current === 1">
          <view class="box_item" v-for="(item, index) in list" :key="index" @click="previewVideo(item, index)">
            <!-- @click="openPoup(item)" -->
            <view class="video">
              <!-- 生成中 -->
              <!-- <image src="../../static/work/clone.png" v-if="item.status===1 " mode=""
								style="width: 100%;height: 486rpx;" class="video">
							</image> -->
              <!-- 成功 -->
              <image :src="item.coverUrl + OssVideoShrink" mode="aspectFill" style="width: 330rpx; border-top-right-radius: 10rpx; border-top-left-radius: 10rpx" class="video"> </image>
              <image src="/static/work/play.png" mode="" class="play" v-if="item.isAuth" style="width: 70rpx; height: 70rpx"> </image>
              <image src="/static/new/btn_list_02.png" mode="" class="play" v-if="!item.isAuth" style="width: 70rpx; height: 70rpx"> </image>
              <image src="/static/new/icon_shouquan.png" v-if="!item.isAuth" style="width: 140rpx; height: 140rpx; position: absolute; top: 0; left: 0" mode=""> </image>
              <!-- 失败 -->
              <!-- <view class="" v-if="item.status===3"
								style="width: 100%;height: 486rpx;background-color: #202020;padding: 140rpx 40rpx 0;border-top-right-radius: 10rpx;border-top-left-radius: 10rpx;"
								class="zl-flex-col zl-col-center">
								<image src="../../static/clone/error.png" mode="" style="width: 62rpx;height: 62rpx;"
									class="video">
								</image>
								<view class="zl-color-white zl-font-24 zl-m-t-20" style="opacity:0.8 ;">
									克隆失败
								</view>
								<view class="zl-color-999 zl-font-22 zl-m-t-50" style="opacity:0.6 ;">
									原因：{{item.reason}}
								</view>
							</view> -->
            </view>
            <view class="content">
              <view class="zl-color-000 zl-font-26">
                {{ item.name }}
              </view>
              <view class="zl-color-999 zl-font-20 zl-m-t-4">
                {{ $util.fomateDate(item.createTime / 1000) }}
              </view>
              <!-- <view class="zl-flex zl-m-t-18 zl-row-right">
								<view class="edit" @click="delPeople(item,index)">
									<uni-icons type="trash" size="18" color="red"></uni-icons>删除
								</view>
							</view> -->
            </view>
          </view>
          <view v-if="list.length <= 0" class="zl-flex-col zl-col-center" style="width: 690rpx; margin-top: 50%">
            <image src="../../static/work/empty.png" mode="" style="width: 230rpx; height: 250rpx; margin-bottom: 48rpx"> </image>
            <text class="zl-font-30 zl-color-666">空空如也，您还没有创建哦~</text>
          </view>
        </view>
        <view class="box1" v-else>
          <view class="box_item1" v-for="(item, index) in list" :key="index">
            <view class="zl-flex zl-row-between">
              <view class="zl-flex">
                <image src="../../static/clone/music.png" mode="" class="play" style="width: 80rpx; height: 80rpx"> </image>
                <view class="zl-flex-col zl-m-l-18">
                  <view style="width: 280rpx" class="zl-font-30 zl-color-000 zl-one-yichu">
                    {{ item.name }}
                  </view>
                  <view class="zl-font-20 zl-color-999 zl-m-t-8" style="opacity: 0.6">
                    {{ $util.fomateDate(item.createTime / 1000) }}
                  </view>
                </view>
              </view>
              <view class="zl-flex">
                <view class="download" v-if="playIng && playId === item.mateId" @click="stop"> <image src="../../static/work/stop.png" mode="" style="width: 25rpx; height: 25rpx; margin-right: 6rpx"></image> 暂停 </view>
                <view class="download" @click="listen(item)" v-else> <image src="../../static/work/listen.png" mode="" style="width: 25rpx; height: 25rpx; margin-right: 6rpx"></image> 试听 </view>
                <view class="edit zl-m-l-24" @click="delVoice(item, index)"> 删除 </view>
              </view>
              <!-- <view class="zl-font-30" style="color: cornflowerblue;" v-if="item.status===1">
								生成中
							</view> -->
              <view class="zl-font-30" style="color: red" v-if="item.status === 3"> 生成失败 </view>
            </view>
            <view class="line" v-if="item.status === 3"> </view>
            <view class="content" v-if="item.status === 3"> 失败原因：{{ item.reason }} </view>
          </view>
          <view v-if="list.length <= 0" class="zl-flex-col zl-col-center" style="width: 690rpx; margin-top: 50%">
            <image src="../../static/work/empty.png" mode="" style="width: 230rpx; height: 250rpx; margin-bottom: 48rpx"> </image>
            <text class="zl-font-30 zl-color-666">空空如也，您还没有创建哦~</text>
          </view>
        </view>
      </z-paging>
      <view class="dh" style="position: fixed; right: 30rpx; bottom: 60rpx">
        <image @click="refresh" @animationend="reset" src="/static/clone/reload.png" :class="[cpuImgRotate ? 'rotating' : 'non-rotating']" style="width: 100%" mode="widthFix"> </image>
      </view>
    </view>
    <!-- <uni-popup ref="popup" type="bottom" border-radius="20rpx 20rpx 0 0" background-color="#EDF0F4"
			:is-mask-click="true" title="123">
			<view class="zl-p-t-38 ">
				<view class="zl-flex zl-row-between zl-m-b-30;zl-p-l-30 zl-p-r-30 zl-p-b-38"
					style="border-bottom: 1rpx solid #DDDDDD; ">
					<text>主播华华</text>
					<image src="../../static/icon/pop_close.png" style="width: 29rpx;height: 29rpx;" mode=""
						@click="closed"></image>
				</view>
				<view class="zl-flex zl-row-center zl-m-l-30 zl-m-r-30 btn">
					预览效果
				</view>
				<view class="zl-flex zl-row-center zl-m-l-30 zl-m-r-30 btn" @click="reName">
					重命名
				</view>
				<view class="zl-flex zl-row-center zl-m-l-30 zl-m-r-30 btn" style="color: #EB5E00;" @click="del">
					删除
				</view>
			</view>
		</uni-popup> -->
    <uni-popup ref="editPopup" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="input" title="修改名称" v-model="name" placeholder="请输入名称" @confirm="submitName"></uni-popup-dialog>
    </uni-popup>
    <uni-popup background-color="#fff" ref="pop2" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">预览素材</view>
          <image @click="closeVideo()" style="width: 30rpx" src="/static/icon/pop_close.png" mode="widthFix"> </image>
        </view>
        <view class="popup-video">
          <video v-if="isVideo" :src="activeVideo" :controls="true"></video>
        </view>
        <view class="btn_box zl-flex zl-row-between" v-if="current === 0">
          <view @click="del(clipTaskId, optIndex)" class="delvideo zl-flex zl-row-center zl-font-32 zl-font-bold"> 删除 </view>
          <view @click="downloadfile(activeVideo)" class="save_btn zl-theme-btn-1 zl-flex zl-row-center zl-font-32 zl-font-bold"> 下载 </view>
        </view>
        <view class="btn_box zl-flex zl-row-between" v-if="current === 1">
          <view style="width: 690rpx" @click="delPeople(digitalId, optIndex)" class="delvideo zl-flex zl-row-center zl-font-32 zl-font-bold"> 删除 </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup :animation="false" ref="popup3" type="center" background-color="#fff" border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
      <view class="tip-box zl-flex-col zl-col-center">
        <image style="width: 120rpx" src="/static/icon/fail.png" mode="widthFix"></image>
        <view class="zl-color-000 zl-font-40 zl-font-600 zl-m-t-36">温馨提示</view>
        <view class="zl-color-666 zl-font-24 zl-m-t-40"> 视频文件大小过大，建议您复制链接进行下载！ </view>
        <view @click="copyUrl()" class="btn99 zl-m-t-66 zl-theme-btn">复制链接 </view>
        <view class="btn99 zl-m-t-32 zl-theme-btn" v-if="videoSize <= 200 * 1024 * 1024" @click="download()"> 仍要下载 </view>
      </view>
      <image @click="$refs.popup3.close()" style="width: 80rpx; margin-top: 70rpx; margin-left: 260rpx" src="/static/icon/close-w.png" mode="widthFix"></image>
    </uni-popup>

    <uni-popup :animation="true" ref="popup4" type="bottom" background-color="#EEF0F4" :safe-area="false" borderRadius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
      <view class="zl-width-100 zl-bg-color-white zl-flex zl-col-center" style="height: 100rpx; border-radius: 20rpx 20rpx 0 0">
        <view class="zl-flex zl-row-center" style="width: 100%">
          <text class="zl-font-32 zl-color-333 zl-text-center zl-font-700">上传授权视频</text>
        </view>
        <image src="/static/icon/popclose2.png" @click="$refs.popup4.close()" style="width: 23rpx; height: 23rpx; position: absolute; top: 40rpx; right: 30rpx" mode=""> </image>
      </view>
      <view class="popup3">
        <view class="zl-flex zl-m-b-30">
          <view class="line zl-m-r-16"></view>
          <text class="zl-font-32 zl-color-333 zl-font-700">真实姓名</text>
        </view>
        <view class="zl-bg-color-white" style="padding: 30rpx; border-radius: 18rpx">
          <input class="uni-input" v-model="userName" placeholder="请输入您真实的姓名" @input="replaceText" />
        </view>
        <view class="zl-flex zl-m-b-30 zl-m-t-30">
          <view class="line zl-m-r-16"></view>
          <text class="zl-font-32 zl-color-333 zl-font-700">提示词</text>
        </view>
        <view class="tipsDescBox">
          <text>{{ authText }}</text>
          <view class="zl-flex-col zl-col-center" style="position: absolute; right: 30rpx; bottom: 30rpx" @click="$util.copy(this.authText)">
            <image src="/static/aiCreate/icon_wenan_copy.png" style="width: 40rpx; height: 40rpx" mode=""> </image>
            <text class="zl-font-20 zl-color-333 zl-m-t-8">复制文本</text>
          </view>
        </view>
        <view class="imageBox zl-flex zl-row-center zl-m-t-30" v-if="authVideoUrl">
          <image :src="authVideoUrl + OssVideoShrink" mode="aspectFit"></image>
          <image src="/static/icon/play.png" mode="" @click="previewAuthVideo(this.authVideoUrl)" style="width: 50rpx; height: 50rpx; position: absolute; top: 50%; left: 50%; transform: translate(-50%)"> </image>
          <image src="/static/new/icon_shuzhiren_error.png" mode="" @click="delAuthVideoUrl" style="position: absolute; right: 0; top: 0; width: 40rpx; height: 40rpx"> </image>
        </view>
      </view>
      <view class="footer zl-flex zl-row-center" style="gap: 20rpx">
        <view class="btn11 zl-flex zl-row-center zl-col-center" @click="toHistory"> 历史授权视频 </view>
        <mediaAuth :list="authList" :max="max" :len="1" :size="100" :userName="userName" @success="media_auth_success($event)"> </mediaAuth>
      </view>
      <view class="zl-theme-btn btn12" @click="submitAuth"> 提交授权 </view>
    </uni-popup>

    <PrivacyPoup></PrivacyPoup>
  </view>
</template>
<script>
import PrivacyPoup from '@/components/PrivacyPoup.vue'
import mediaAuth from '@/components/media_auth.vue'
export default {
  components: {
    PrivacyPoup,
    mediaAuth
  },
  data() {
    return {
      current: 0,
      list: [],
      playIng: false,
      playId: '',
      playurl: '',
      innerAudioContext: null,
      // name: '',
      content: '',
      OssVideoShrink: getApp().globalData.OssVideoShrink,
      ossVideoCover: getApp().globalData.ossVideoCover,
      isVideo: false,
      activeVideo: '',
      clipTaskId: 0,
      optIndex: -1,
      optSatus: 0,
      videoSize: 0,
      cpuImgRotate: false,

      name: getApp().globalData.oemName,
      authVideoUrl: '',
      userName: '',
      authText: '',
      authMateId: ''
    }
  },
  onLoad(opt) {
    if (opt && opt.current) {
      console.log(opt)
      this.current = opt.current
    }
    uni.$on('reloadList', (res) => {
      this.$refs.paging.reload()
    })
    uni.$on('chooseHistoryModelId', (res) => {
      if (res) {
        this.authVideoUrl = res.coverUrl
        this.authMateId = res.mateId
        console.log(res, 'res11')
      }
    })
  },
  onUnload() {
    uni.$off('chooseHistoryModelId')
    uni.$off('reloadList')
  },
  async onShow() {
    await this.$onLaunched
    const isReload = getApp().globalData.isReload
    if (isReload) {
      this.current = getApp().globalData.cloneType
      this.$refs.paging.reload()
      getApp().globalData.isReload = false
    }
  },
  watch: {
    current(newdata) {
      if (newdata) {
        this.$refs.paging.reload()
      }
    }
  },
  onShareAppMessage(res) {
    return {
      title: getApp().globalData.shareTitle,
      imageUrl: getApp().globalData.shareImg,
      path: '/pages/index/index'
    }
  },
  onHide() {
    this.stop()
    this.closeVideo()
  },
  methods: {
    delAuthVideoUrl() {
      this.authVideoUrl = ''
      this.authMateId = 0
    },
    submitAuth() {
      if (!this.userName) {
        return this.$util.msg('请填写授权视频真实名称！')
      }
      if (this.authMateId <= 0) {
        return this.$util.msg('请上传授权视频文件！')
      }
      this.api.clone
        .setauthdigital({
          digitalId: this.digitalId,
          authMateId: this.authMateId,
          authText: this.authText
        })
        .then((res) => {
          if (res.code === 0) {
            this.$refs.popup4.close()
            this.$refs.paging.reload()
            this.$util.msg(res.msg)
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    media_auth_success(res) {
      console.log(res)
      if (res) {
        this.authList = res
        if (res[0]) {
          this.authVideoUrl = res[0].url
          this.authMateId = res[0].mateId
        }
      }
    },
    toHistory() {
      uni.navigateTo({
        url: '/pages/clone/historyAuthList'
      })
    },
    replaceText() {
      if (this.userName) {
        this.authText = `我是${this.userName ? this.userName : 'XXX'}，特此声明，同意授权${this.name}，对我的形象进行克隆，用于数字人视频合成。`
      } else if (this.name) {
        this.authText = `我是${this.userName ? this.userName : 'XXX'}，特此声明，同意授权${this.name}，对我的形象进行克隆，用于数字人视频合成。`
      }
    },
    toAuth(item) {
      // this.digitalId = item.digitalId;
      // this.replaceText()
      // this.authVideoUrl = ''
      // this.userName = ''
      // this.$refs.popup4.open()
      uni.navigateTo({
        url: '/pages/clone/authVideo?digitalId=' + item.digitalId
      })
    },
    previewAuthVideo(url) {
      this.activeVideo = url
      this.$refs.pop2.open()
    },
    previewVideo(item, index) {
      if (this.current == 1) {
        if (item.isAuth) {
          this.clipTaskId = item.clipTaskId
          this.digitalId = item.digitalId
          this.optIndex = index
          this.optSatus = item.status
          this.isVideo = true
          this.api.userfile
            .geturl({
              mateId: item.mateId
            })
            .then((res) => {
              if (res.code === 0) {
                this.activeVideo = res.data.url
                this.videoSize = res.data.size
                this.$refs.pop2.open()
              } else {
                this.$util.msg(res.msg)
              }
            })
            .catch((err) => {
              this.$util.msg('请检查网络连接！')
            })
        } else {
          uni.navigateTo({
            url: '/pages/clone/authVideo?digitalId=' + item.digitalId
          })
        }
      } else {
        this.clipTaskId = item.clipTaskId
        this.digitalId = item.digitalId
        this.optIndex = index
        this.optSatus = item.status
        this.isVideo = true
        this.api.userfile
          .geturl({
            mateId: item.mateId
          })
          .then((res) => {
            if (res.code === 0) {
              this.activeVideo = res.data.url
              this.videoSize = res.data.size
              this.$refs.pop2.open()
            } else {
              this.$util.msg(res.msg)
            }
          })
          .catch((err) => {
            this.$util.msg('请检查网络连接！')
          })
      }
    },
    closeVideo() {
      setTimeout(() => {
        this.activeVideo = ''
        this.isVideo = false
      }, 250)
      this.$refs.pop2.close()
    },
    // 打开删除弹窗
    del(clipTaskId, index) {
      console.log(index)
      uni.showModal({
        title: '温馨提示',
        content: '确定删除该数字人视频吗？',
        success: (res) => {
          if (res.confirm) {
            this.api.clip
              .deletecliptask({
                clipTaskId: clipTaskId
              })
              .then((res) => {
                if (res.code === 0) {
                  this.list.splice(index, 1)
                  this.$refs.pop2.close()
                  this.$util.msg(res.msg)
                } else {
                  this.$util.msg(res.msg)
                }
              })
              .catch((err) => {
                this.$util.msg('请检查网络连接！')
              })
          } else if (res.cancel) {
          }
        }
      })
    },
    delVoice(item, index) {
      uni.showModal({
        title: '温馨提示',
        content: '确定删除该数字声音吗？',
        success: (res) => {
          if (res.confirm) {
            this.api.clone
              .deletevoice({
                voiceId: item.voiceId
              })
              .then((res) => {
                if (res.code === 0) {
                  this.list.splice(index, 1)
                } else {
                  this.$util.msg(res.msg)
                }
              })
              .catch((err) => {
                this.$util.msg('请检查网络连接！')
              })
          } else if (res.cancel) {
          }
        }
      })
    },
    delPeople(digitalId, index) {
      uni.showModal({
        title: '温馨提示',
        content: '确定删除该数字分身吗？',
        success: (res) => {
          if (res.confirm) {
            this.api.clone
              .deletedigital({
                digitalId: digitalId
              })
              .then((res) => {
                if (res.code === 0) {
                  this.list.splice(index, 1)
                  this.$refs.pop2.close()
                  this.$util.msg(res.msg)
                } else {
                  this.$util.msg(res.msg)
                }
              })
              .catch((err) => {
                this.$util.msg('请检查网络连接！')
              })
          } else if (res.cancel) {
          }
        }
      })
    },
    openPoup(item) {
      this.name = item.name
      this.$refs.popup.open()
    },
    closed() {
      this.$refs.popup.close()
    },
    // reName 重命名
    reName() {
      this.$refs.editPopup.open()
    },
    submitName() {
      // 提交修改名称
    },
    refresh() {
      this.cpuImgRotate = true
      this.$refs.paging.clear()
      this.$refs.paging.reload()
      this.stop()
    },
    reset() {
      this.cpuImgRotate = false
    },
    changetab(tab) {
      this.current = tab
      this.$refs.paging.clear()
      this.$refs.paging.reload()
      this.stop()
    },
    queryList(page, limit) {
      let par = {
        page: page,
        limit: limit
        // status: 0
      }
      let par1 = {
        page: page,
        limit: limit,
        // status: 0,
        target: 2
      }
      if (this.current === 0) {
        this.api.clip
          .getcliptasklist(par1)
          .then((res) => {
            if (res.code === 0) {
              this.$refs.paging.complete(res.data.list)
            } else {
              this.$util.msg(res.msg)
              this.$refs.paging.complete(false)
            }
          })
          .catch((err) => {
            this.$util.msg('请检查网络连接！')
            this.$refs.paging.complete(false)
          })
      } else if (this.current === 1) {
        this.api.clone
          .getdigitalmodellist(par)
          .then((res) => {
            if (res.code === 0) {
              this.$refs.paging.complete(res.data.list)
            } else {
              this.$util.msg(res.msg)
              this.$refs.paging.complete(false)
            }
          })
          .catch((err) => {
            // this.$util.msg('请检查网络连接！');
            this.$refs.paging.complete(false)
          })
      } else {
        this.api.clone
          .getvoicemodellist(par)
          .then((res) => {
            if (res.code === 0) {
              this.$refs.paging.complete(res.data.list)
            } else {
              this.$util.msg(res.msg)
              this.$refs.paging.complete(false)
            }
          })
          .catch((err) => {
            // this.$util.msg('请检查网络连接！');
            this.$refs.paging.complete(false)
          })
      }
    },
    // 试听 获取播放地址
    listen(item) {
      this.api.userfile
        .geturl({
          mateId: item.mateId
        })
        .then((res) => {
          if (res.code === 0) {
            this.playId = item.mateId
            this.playurl = res.data.url
            this.playIng = true
            this.play()
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    // 播放
    play() {
      if (this.innerAudioContext) {
        this.innerAudioContext.stop()
      }
      this.innerAudioContext = uni.createInnerAudioContext()
      this.innerAudioContext.src = this.playurl
      this.innerAudioContext.play()
      this.innerAudioContext.onEnded(() => {
        this.playIng = false
      })
    },
    // 暂停
    stop() {
      if (this.innerAudioContext) {
        this.innerAudioContext.stop()
      }
      this.playurl = ''
      this.playIng = false
    },
    async downloadfile() {
      console.log(this.activeVideo)
      if (!this.activeVideo) {
        this.$util.msg('视频还未加载完哦！')
        return
      }
      try {
        var res = await this.$mp_mini.authorize('scope.writePhotosAlbum', '保存到相册')
        console.log(res, 'res11111')
      } catch (e) {
        this.$util.msg(e.message)
        return
      }
      if (this.videoSize > 100 * 1024 * 1024) {
        this.$refs.popup3.open()
      } else {
        this.download()
      }
    },
    // 复制链接
    copyUrl() {
      this.$util.copy(this.activeVideo)
    },
    download() {
      uni.showLoading({
        title: '正在下载...'
      })
      uni.downloadFile({
        url: this.activeVideo,
        timeout: 6000000,
        success: (data) => {
          if (data.statusCode === 200) {
            uni.saveVideoToPhotosAlbum({
              filePath: data.tempFilePath,
              success: () => {
                uni.hideLoading()
                this.$util.msg('保存成功~')
              },
              fail: (er) => {
                uni.hideLoading()
                this.$util.msg('视频保存失败！')
              }
            })
          } else {
            uni.hideLoading()
            this.$util.msg('视频下载失败！')
          }
        },
        fail: (err) => {
          uni.hideLoading()
          this.$util.msg('视频下载失败！')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.toptab {
  width: 100%;
  height: 120rpx;
  // background-color: #fff;
  padding: 0 50rpx;

  .opc {
    opacity: 0.5;
  }

  .tab_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200rpx;
    font-size: 30rpx;
    color: #202020;

    .line {
      width: 42rpx;
      height: 6rpx;
      background: #000000;
      border-radius: 10rpx;
      overflow: hidden;
      margin-top: 12rpx;
    }

    .line_fff {
      width: 42rpx;
      height: 6rpx;
      // background: #fff;
      border-radius: 10rpx;
      margin-top: 14rpx;
    }
  }
}

.list {
  // margin: 0 30rpx;
  width: 750rpx;
  height: calc(100vh - 140rpx);
  background-color: #edf0f4;
  position: relative;

  .box {
    width: 750rpx;
    padding: 0 30rpx;
    display: flex;
    flex-direction: row;
    gap: 30rpx;
    flex-wrap: wrap;

    .box_item {
      width: 330rpx;

      .video {
        width: 100%;
        height: 486rpx;
        position: relative;
      }

      .play {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .content {
        background-color: #fff;
        padding: 24rpx 30rpx;
        border-radius: 0rpx 0rpx 10rpx 10rpx;
      }
    }
  }

  .box1 {
    width: 750rpx;
    padding: 0 30rpx;
    border-radius: 20rpx;

    .box_item1 {
      padding: 40rpx 30rpx;
      margin-bottom: 30rpx;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: 20rpx;

      .line {
        margin-top: 40rpx;
        width: 633rpx;
        height: 1rpx;
        border: 1rpx solid #979797;
        opacity: 0.2;
      }

      .content {
        margin-top: 30rpx;
        font-size: 24rpx;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }

  .download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 121rpx;
    height: 56rpx;
    background: #ffffff;
    border-radius: 10rpx;
    border: 2rpx solid #000000;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
  }

  .edit {
    // margin-left: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20rpx;
    height: 56rpx;
    background: #ffffff;
    border-radius: 10rpx;
    border: 1rpx solid red;
    font-weight: 400;
    font-size: 24rpx;
    color: red;
  }
}

.btn {
  background-color: #ffffff;
  margin-bottom: 30rpx;
  height: 120rpx;
  border-radius: 10rpx;
  color: #131415;
  font-weight: 500;
}

.pop-box {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;

  .pop-top {
    height: 120rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid #ddd;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #131415;
  }
}

.popup-video {
}

.popup-video video {
  width: 100%;
  height: 75vh;
}

.btn_box {
  width: 750rpx;
  height: 128rpx;
  background: #ffffff;
  box-shadow: 0 -3rpx 9rpx 0 rgba(0, 0, 0, 0.1);
  padding: 0 30rpx;
  position: relative;
  z-index: 9;

  .delvideo {
    width: 330rpx;
    height: 88rpx;
    border-radius: 44rpx;
    border: 2rpx solid #000;
  }

  .save_btn {
    width: 330rpx;
    height: 88rpx;
    border-radius: 44rpx;
    margin-left: 30rpx;
  }
}

::v-deep .vue-ref {
  padding-bottom: 10rpx !important;
}

.tip-box {
  position: relative;
  width: 600rpx;
  background: #ffffff;
  border-radius: 18rpx;
  padding: 38rpx 60rpx 68rpx;
  z-index: 9999;
}

.btn99 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400rpx;
  height: 88rpx;
  border-radius: 44rpx;
}

.non-rotating {
}

.rotating {
  animation-name: rotating;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.dh {
  width: 88rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 4rpx 4rpx 8rpx 0rpx rgba(98, 125, 162, 0.5);
}

.popup3 {
  padding: 30rpx 30rpx 30rpx;
  overflow: auto;
  max-height: 70vh;

  .line {
    width: 8rpx;
    height: 32rpx;
    background: #1e47e1;
    border-radius: 4rpx;
  }

  .footer {
    background: #ffffff;
  }
}

.tipsDescBox {
  padding: 30rpx;
  width: 690rpx;
  height: 377rpx;
  background: #ffffff;
  border-radius: 18rpx;
  position: relative;
}

.btn11 {
  width: 260rpx;
  height: 110rpx;
  background: #ffffff;
  border-radius: 18rpx;
  border: 1rpx solid #000000;
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
}

.btn12 {
  width: 690rpx;
  height: 110rpx;
  border-radius: 18rpx;
  font-weight: 500;
  font-size: 32rpx;
  color: #fff;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imageBox {
  width: 690rpx;
  height: 406rpx;
  background-color: #ffffff;
  border-radius: 18rpx;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
</style>
